<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../lib/react.development.js"></script>
    <!-- //引入核心库 -->
    <script src="../lib//react-dom.development.js"></script>
    <!-- //支持react的dom操作 -->
    <script src="../lib/babel.min.js"></script>
    <!-- //引入babel，用于将jsx转为js -->
    <!-- //此处类型一定要加个babel  -->
    <script type="text/babel"> 
    class Weather extends React.Component{
        constructor(props){
            console.log(`构造器被调了`)//由此可见构造器只会被调用一次
            super(props)//类式组件必须加super,props是用来接收传递过来的值
            this.state={isHot:true,wind:true}//state是react中存储数据的一个小仓库
            this.weather=this.demo.bind(this)//bind是改变this的指向,且demo在原型上面
            //上面这一行的作用是让demo函数的this可以得到组件的实例
        }
        render(){
            console.log(this)//render被调用了n+1次(页面展示时就被调了)
            //react绑定事件需要在js的基础上将on后面单词首字母
            return <h1 onClick={this.weather}>今天非常的{this.state.isHot?'炎热':'凉爽'},{this.state.wind?'微风':'暴雨'}</h1>
            //需要通过this的实例对象来获取里面的方法
        }
        demo(){
        console.log(this)//由于demo函数是作为onclick的一个回调(不能指向实例对象了)，
        //然后在类中定义方法指向window为undifined
        // this.state.isHot=!this.state.isHot不能直接修改state里面的数据,不然没用
        const isHot=this.state.isHot
        const wind=this.state.wind
        this.setState({isHot:!isHot,wind:!wind})//通过React.component上的setstate才能修改值(在原型链上)
            console.log(isHot)
    }
    }
    ReactDOM.render(<Weather name='我在传递值'/>,document.getElementById('test'))
    const w=new Weather()
    </script>
</body>
</html>